<template>
  <view class="send-page">
    <!-- 顶部：商品信息 -->
    <view class="card goods-card" v-if="orderInfo && orderInfo.id">
      <image class="goods-image" :src="orderInfo.pic" mode="aspectFill"></image>
      <view class="goods-info">
        <view class="goods-name">{{ orderInfo.prodName || '-' }}</view>
        <view class="goods-meta">
          <text class="price">￥{{ formatPrice(orderInfo.price) }}</text>
          <text class="units" v-if="orderInfo.units">/{{ orderInfo.units }}</text>
          <text class="num">x{{ orderInfo.num || 1 }}</text>
        </view>
        <view class="order-row">订单号：{{ orderInfo.orderNumber || '-' }}</view>
        <view class="order-row">下单时间：{{ orderInfo.createTime || '-' }}</view>
      </view>
    </view>

    <!-- 买家信息 -->
    <view class="card buyer-card" v-if="orderInfo && orderInfo.id">
      <view class="row">
        <text class="label">收货人</text>
        <text class="val">{{ orderInfo.takePeople || '-' }}</text>
      </view>
      <view class="row">
        <text class="label">联系电话</text>
        <text class="val">{{ orderInfo.mobile || '-' }}</text>
      </view>
      <view class="row addr">
        <text class="label">收货地址</text>
        <text class="val">{{ orderInfo.address || '-' }}</text>
      </view>
      <view class="row addr">
        <text class="label">商品总价</text>
        <text class="val">¥{{ orderInfo.payable || '-' }}</text>
      </view>
      <view class="row addr">
        <text class="label">优惠金额</text>
        <text class="val green-value">
          ¥{{ getPreferential(orderInfo.payable, orderInfo.actualTotal) || '0' }}
        </text>
      </view>
      <view class="row addr">
        <text class="label">实际支付</text>
        <text class="val red-value" style="font-weight: bold;">¥{{ orderInfo.actualTotal }}</text>
      </view>
    </view>

    <!-- 发货信息表单 -->
    <view class="card form-card">
      <u--form ref="formRef" :model="formData" labelWidth="160">
        <u-form-item label="配送类型" prop="dvyType" required>
          <!--          <u-radio-group size="30" v-model="formData.dvyType" placement="row">-->
          <!--            <u-radio :name="0" label="线上" size="28"></u-radio>-->
          <!--            <u-radio :name="1" label="线下" size="28" style="margin-left: 32rpx;"></u-radio>-->
          <!--          </u-radio-group>-->
          <u-radio-group v-model="formData.dvyType" size="28">
            <u-radio :name="0" label="线上物流" activeColor="#5ba0f2" icon-size="28"
                     label-size="28"></u-radio>
            <u-radio :name="1" label="线下交易" activeColor="#5ba0f2" icon-size="28"
                     label-size="28"></u-radio>
          </u-radio-group>
        </u-form-item>

        <u-form-item label="物流公司" prop="expressName" v-if="formData.dvyType === 0">
          <u--input v-model="formData.expressName" placeholder="请输入物流公司名称"
                    border="none"></u--input>
        </u-form-item>
        <u-form-item label="物流单号" prop="expressNo" v-if="formData.dvyType === 0">
          <u--input v-model="formData.expressNo" placeholder="请输入物流单号"
                    border="none"></u--input>
        </u-form-item>
      </u--form>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <u-button type="primary" class="submit-btn" @click="onSubmit">提交发货</u-button>
    </view>
  </view>
</template>

<script>
import {
  mapGetters
} from 'vuex'
export default {
  data() {
    return {
      orderInfo: {},
      formData: {
        dvyType: 0, // 0 线上 1 线下
        expressName: '',
        expressNo: ''
      },
      rulesOnline: {
        dvyType: [{required: true, message: '请选择配送类型'}],
        expressName: [{required: true, message: '请输入物流公司'}],
        expressNo: [{required: true, message: '请输入物流单号'}]
      },
      rulesOffline: {
        dvyType: [{required: true, message: '请选择配送类型'}]
      }
    }
  },
  onLoad(opt) {
    if (opt && opt.id) {
      this._getOrderDetail(opt.id)
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  methods: {
    formatPrice(v) {
      const n = Number(v || 0)
      return n.toFixed(2)
    },
    // 根据id查询订单详情
    _getOrderDetail(id) {
      let params = {id}
      this.$api.getOrderDetail(params).then(res => {
        if (res.success) {
          this.orderInfo = res.result || {}
        }
      })
    },
    async onSubmit() {
      const rules = this.formData.dvyType === 0 ? this.rulesOnline : this.rulesOffline
      await this.$refs.formRef.setRules(rules)

      if (this.formData.dvyType === 1) {
        // 线下，先确认
        uni.showModal({
          title: '提醒',
          content: '确定为线下交易无需填写物流信息吗？',
          success: (res) => {
            if (res.confirm) {
              this._doSubmit()
            }
          }
        })
      } else {
        // 线上，校验必填
        this.$refs.formRef.validate().then(() => {
          this._doSubmit()
        }).catch(() => {
        })
      }
    },
    _doSubmit() {
      if (!this.orderInfo || !this.orderInfo.id) {
        return uni.showToast({title: '订单信息异常', icon: 'none'})
      }
      const payload = {
        cardId:this.userInfo.id,
        id: this.orderInfo.id,
        dvyType: this.formData.dvyType,
        expressName: this.formData.dvyType === 0 ? this.formData.expressName : '',
        expressNo: this.formData.dvyType === 0 ? this.formData.expressNo : ''
      }
      this.$api.addDelivery(payload).then(res => {
        if (res && res.success) {
          uni.showToast({title: '发货成功', icon: 'none'})
          setTimeout(() => {
            uni.navigateBack()
          }, 600)
        } else {
          uni.showToast({title: (res && res.message) || '提交失败', icon: 'none'})
        }
      }).catch(() => {
        uni.showToast({title: '提交失败', icon: 'none'})
      })
    },
    //获取优惠价
    getPreferential(payable, actualTotal) {
      if (payable && actualTotal) {
        let payableNum = Number(payable);
        let actualTotalNum = Number(actualTotal);
        let discount = payableNum - actualTotalNum;
        if (discount > 0) {
          return discount;
        } else {
          return 0;
        }
      } else {
        return 0;
      }
    }
  },
}
</script>

<style lang="scss" scoped>
.send-page {
  min-height: 80vh;
  background: #f5f7fa;
  padding-bottom: 140rpx;
}

.card {
  background: #fff;
  margin: 20rpx;
  padding: 20rpx;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
}

.goods-card {
  display: flex;
}

.goods-image {
  width: 180rpx;
  height: 180rpx;
  border-radius: 12rpx;
  background: #f2f3f5;
}

.goods-info {
  flex: 1;
  margin-left: 20rpx;
}

.goods-name {
  font-size: 30rpx;
  font-weight: 600;
  color: #1f2d3d;
}

.goods-meta {
  margin-top: 10rpx;
  color: #ff4d4f;
  display: flex;
  align-items: baseline;
}

.goods-meta .price {
  font-size: 32rpx;
  font-weight: 700;
}

.goods-meta .units {
  margin-left: 6rpx;
  font-size: 24rpx;
  color: #606266;
}

.goods-meta .num {
  margin-left: 16rpx;
  font-size: 24rpx;
  color: #909399;
}

.order-row {
  margin-top: 6rpx;
  font-size: 24rpx;
  color: #606266;
}

.buyer-card .row {
  display: flex;
  justify-content: space-between;
  padding: 8rpx 0;
}

.buyer-card .row.addr {
  align-items: flex-start;
}

.buyer-card .label {
  color: #606266;
  font-size: 26rpx;
}

.buyer-card .val {
  color: #303133;
  font-size: 26rpx;
  width: 70%;
  text-align: right;
}

.red-value {
  color: #ff4d4f !important;
}

.green-value {
  color: #19be6b !important;
}

.form-card {
  overflow: hidden;

  /deep/ .u-radio {
    margin-right: 20rpx !important;
  }
}

.bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  padding: 20rpx;
  border-top: 1rpx solid #eee;
}

.submit-btn {
  width: 100%;
  height: 80rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
}
</style>
